<template>
    <div>
        <el-dialog :title="addInfo.isAdd ? '添加秒杀' : '编辑秒杀'" :visible.sync="addInfo.isShow" center>
            <el-form :model="seckForm" :rules="rules" ref="seckForm">
                <el-form-item label="活动名称" prop="title" :label-width="formLabelWidth">
                    <el-input v-model="seckForm.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="活动期限" :label-width="formLabelWidth">
                    <el-date-picker
                      v-model="timer"
                      type="datetimerange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      align="right">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="一级分类" :label-width="formLabelWidth" prop="first_cateid">
                    <el-select placeholder="请选择分类" v-model="seckForm.first_cateid" @change="$event=>changeCate(false)">
                        <el-option v-for="item in catelist" :label="item.catename" :value="item.id"
                            :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="二级分类" :label-width="formLabelWidth" prop="second_cateid">
                    <el-select placeholder="请选择分类" v-model="seckForm.second_cateid"  @change='$event=>changeSecond(false)'>
                        <el-option v-for="item in secondCatearr" :label="item.catename" :value="item.id"
                            :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品" :label-width="formLabelWidth">
                        <el-select placeholder="请选择商品" v-model="seckForm.goodsid" >
                            <el-option 
                            v-for="item in goodsArr" 
                            :label="item.goodsname" 
                            :value="item.id"
                            :key="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="seckForm.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                        :inactive-value="2"></el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button @click="confirn" type="primary">确 定</el-button>
            </div>
        </el-dialog>
</div>
</template>

<script>
import { seckadd, seckedit, seckinfo, getgoodslistbysid,goodslist } from '@/request/api';
import { mapGetters, mapActions } from 'vuex';
export default {
    props: ['addInfo'],
    data() {
        return {
            formLabelWidth: '120px',
            seckForm: {
                title: '',//限时秒杀名称
                begintime: '',//开始时间(时间戳)
                endtime: '',//结束时间(时间戳)
                first_cateid: '',//商品一级分类编号
                second_cateid: '',//商品二级分类编号
                goodsid: '',//商品编号
                status: 1,//状态1正常2禁用
            },
            rules: {
                title: [
                    { required: true, message: '请输入秒杀名称', trigger: 'blur' },
                    { min: 2, max: 16, message: '长度在 2 到 16 个字符', trigger: 'blur' }
                ]
            },
            secondCatearr: [],//二级分类列表
            timer:null,
            goodsArr: []//商品分类数组
        };
    },
    mounted() {
        this.getcateAction();
    },
    computed: {
        ...mapGetters({
            catelist: 'cate/getCteList'
        })
    },
    methods: {
        ...mapActions({
            getcateAction: 'cate/changeCateAction',
            getSeckAction: 'seck/getSeckAction'
        }),
        changeCate(n) {
            let index = this.catelist.findIndex((item) => this.seckForm.first_cateid == item.id);
            this.secondCatearr = this.catelist[index].children;
            if (!n) {
                //清空二级分类内容
                this.seckForm.second_cateid = '';
                //清空商品列表
                this.seckForm.goodsid = ''
            }
        },
        changeSecond(n){
            goodslist({
                fid:this.seckForm.first_cateid,
                sid:this.seckForm.second_cateid
            }).then(res=>{
                console.log(res,'111');
                this.goodsArr = res.list ? res.list : [];
                if (!n) {
                    this.seckForm.goodsid = ''
                }
            })
        },
        reset() {
            this.seckForm = {
                title: '',//限时秒杀名称
                begintime: '',//开始时间(时间戳)
                endtime: '',//结束时间(时间戳)
                first_cateid: '',//商品一级分类编号
                second_cateid: '',//商品二级分类编号
                goodsid: '',//商品编号
                status: 1,//状态1正常2禁用
            };
            this.$refs.seckForm.resetFields();//重置表单验证
        },
        cancel() {
            this.$emit('cancel', false);
            this.reset()
        },
        lookup(id) {
            seckinfo({ id }).then(res => {
                if (res.code == 200) {
                    console.log(this.seckForm);
                  this.seckForm = res.list;
                  this.seckForm.id = id;
                  this.timer = [
                    new Date(parseInt(this.seckForm.begintime)),
                    new Date(parseInt(this.seckForm.endtime)),
                  ];
                  this.changeCate(true)
                  this.changeSecond(true)
                } else {
                  this.$message.error(res.msg);
                }
            })
        },
        confirn() {
            // return
            console.log(this.seckForm);
            this.$refs.seckForm.validate((valid) => {
                if (valid) {
                    this.seckForm.begintime = new Date(this.timer[0]).getTime();
                    this.seckForm.endtime = new Date(this.timer[1]).getTime();
                    if (this.addInfo.isAdd) {
                        seckadd(this.seckForm).then(res => {
                            console.log(res,'响应');
                            if (res.code == 200) {
                                this.cancel();
                                this.getSeckAction();
                                this.$message.success(res.msg)
                            } else {
                                this.$message.error(res.msg)
                            }
                        }) 
                    } else {
                        seckedit(this.seckForm).then(res => {
                            if (res.code == 200) {
                                this.$message.success(res.msg);
                                this.cancel();
                                this.getSeckAction();
                            } else {
                                this.$message.error(res.msg)
                            }
                        })
                    }
                } else {
                    this.$message.error('验证失败')
                    return false
                }
            })
        }
    }
};
</script>

<style scoped></style>